import { defineComponent, ref } from 'vue';
import Basic from './Basic.vue';
import TestTabs from './TestTabs';
import Layout from './Layout';
import BindListView from './BindListView';
import BindListViewDemo from './BindListViewDemo';
import BindListViewDemo2 from './BindListViewDemo2';
import BindListViewDemoQueryPlan from './BindListViewDemoQueryPlan';
export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    const model = ref('BindListViewDemoQueryPlan');

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <t-select
              v-model={model.value}
              options={[
                { label: 'Basic', value: 'Basic' },
                { label: '测试Tabs组件', value: 'TestTabs' },
                { label: 'Layout', value: 'Layout' },
                { label: 'BindListView', value: 'BindListView' },
                { label: 'BindListViewDemo', value: 'BindListViewDemo' },
                { label: 'BindListViewDemo2', value: 'BindListViewDemo2' },
                {
                  label: 'BindListViewDemoQueryPlan',
                  value: 'BindListViewDemoQueryPlan',
                },
              ]}
            ></t-select>
          </div>
          {'BindListViewDemo2' == model.value && (
            <div class='block-'>
              <h5 class='title'>BindListViewDemo2</h5>
              <BindListViewDemo2 />
            </div>
          )}
          {'BindListViewDemoQueryPlan' == model.value && (
            <div class='block-'>
              <h5 class='title'>BindListViewDemoQueryPlan</h5>
              <BindListViewDemoQueryPlan />
            </div>
          )}
          {'BindListViewDemo' == model.value && (
            <div class='block-'>
              <h5 class='title'>BindListViewDemo</h5>
              <BindListViewDemo />
            </div>
          )}
          {'BindListView' == model.value && (
            <div class='block-'>
              <h5 class='title'>BindListView</h5>
              <BindListView />
            </div>
          )}
          {'Basic' == model.value && (
            <div class='block-'>
              <h5 class='title'>原始</h5>
              <Basic />
            </div>
          )}
          {'TestTabs' == model.value && (
            <div class='block-'>
              <h5 class='title'>测试Tabs组件</h5>
              <TestTabs />
            </div>
          )}
          {'Layout' == model.value && (
            <div class='block-'>
              <h5 class='title'>Layout</h5>
              <Layout />
            </div>
          )}
        </div>
      );
    };
  },
});
